<template>
  <a-modal v-model:visible="visible" :title="userId ? '修改用户信息' : '创建账号'" :on-before-ok="handleConfirm">
    <a-form ref="formRef" :model="form" :style="{ width: 'auto' }" @submit="handleSubmit">
      <a-form-item field="username" label="使用人姓名" :rules="rules.username">
        <a-input v-model="form.username" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item v-if="!userId" field="mobile" label="手机号码" :rules="rules.mobile">
        <a-input v-model="form.mobile" placeholder="请输入手机号码" />
      </a-form-item>
      <a-form-item v-if="!userId" field="password" label="登录密码" :rules="rules.password">
        <a-input-password v-model="form.password" placeholder="请输入密码" allow-clear> </a-input-password>
      </a-form-item>

      <a-form-item field="status" label="账号状态" :rules="rules.status">
        <a-radio-group v-model="form.status">
          <a-radio value="normal">启用</a-radio>
          <a-radio value="stop">停止</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { addUserList, editUserList, getUserList } from '@/apis'
import * as Regexp from '@/utils/regexp'

const emits = defineEmits(['reFreshTable'])
const visible = ref(false)
const userId = ref('')
const formRef = ref<FormInstance>()
const form = reactive({
  username: '',
  group_id: 1,
  mobile: '',
  password: '',
  status: 'normal'
})
const rules = {
  username: [{ required: true, message: '使用人姓名不能为空' }],
  mobile: [
    { required: true, message: '手机号码不能为空' },
    { match: Regexp.Phone, message: '手机号格式不正确' }
  ],
  password: [{ required: true, message: '登录密码不能为空' }],
  status: [{ required: true, message: '账号状态不能为空' }]
}

const show = (id?: string) => {
  visible.value = true
  if (id) {
    userId.value = id
    initUserInof()
  }
}
const initUserInof = async () => {
  if (userId.value) {
    const res = await getUserList({ user_id: userId.value })
    let resData = res.data.rows?.[0] || {}
    if (res.code === 1) {
      form.username = resData.username
      form.mobile = resData.mobile
      form.status = resData.status || 'normal'
    }
  }
}
const handleConfirm = async () => {
  const flag = await formRef.value?.validate()
  if (flag) {
    return false
  } else {
    let resData = {}
    if (userId.value) {
      resData = await editUserList({
        user_name: form.username,
        status: form.status,
        user_id: userId.value
      })
    } else {
      resData = await addUserList({
        ...form
      })
    }
    if (resData.code === 1) {
      Message.success(resData.msg)
      visible.value = false
      form.username = ''
      form.mobile = ''
      form.password = ''
      form.status = 'normal'
      userId.value = ''
      emits('reFreshTable')
    } else {
      Message.error(resData.msg)
      return false
    }
  }
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
